<template>
	<view style="overflow: hidden;">
		<booking-card/>
		<!-- 学习剩余时长 -->
		<view class="residue-box">
			<span style="font-size: 80rpx;color: #2282ff;">02:06:49</span>
			<span style="color: #2282ff;">学习剩余时长</span>
		</view>
		<!-- 提醒信息 -->
		<view class="remind-box">
			<span style="margin-left:30rpx;margin-bottom:10rpx">若您需暂时离开,请选择暂离</span>
			<span style="margin-left:30rpx;margin-bottom:10rpx">若您已使用完毕座位,请选择退座</span>
			<span style="margin-left:30rpx;margin-bottom:10rpx">若您还需继续使用座位,请选择续约</span>
		</view>
		<view class="operate-btns-box">
			<button class="mini-btn renewal-btn" type="primary" size="mini">续约</button>
			<button class="mini-btn leave-btn" type="default" size="mini">暂离</button>
			<button class="mini-btn refund-btn" type="default" size="mini">退座</button>
		</view>
		<button class="confirm-know-box" type="default" @click="knowBack">
			我知道了
		</button>
	</view>
</template>

<script setup>
import { ref, reactive, computed, nextTick, watch, watchEffect, onMounted } from 'vue';
import bookingCard from '@/components/booking/booking-card.vue'
const knowBack = () => {
	uni.switchTab({
		url: '/pages/meUser/meUser' 
	});
}
</script>

<style lang="scss" scoped>
@mixin flex1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
// 纵向flex(横向在x轴起点  纵向y轴平分距离)
@mixin flex2 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
// 学习剩余时长
.residue-box{
	height: 300rpx;
	@include flex1;
}
// 黄色提醒信息
.remind-box{
	@include flex2;
	height: 240rpx;
	background-color: rgb(254,247,238);
	color: rgb(221, 207, 8);
	margin: 0 10rpx;
	border: thin solid rgb(221, 207, 8);
	border-radius: 20rpx;
}
// 三个操作按钮
.operate-btns-box{
	width: 750rpx;
	display: flex;
	justify-content: flex-start;
	margin-top: 40rpx;
	.mini-btn{
		// margin: 0  100rpx 0  10rpx;
	}
	.renewal-btn{
		margin-left: 10rpx;
	}
	.leave-btn{
		margin-left: 70rpx;
		margin-right: 70rpx;
		color: #cebd00;
		border: solid thin #cebd00;
	}
	.refund-btn{
		margin-right: 10rpx;
		color: #ff5500;
		border: solid thin #ff5500;
	}
}
:deep(uni-button:after){
	border: none;
}
.confirm-know-box{
	color: #1919ce;
	border: #1919ce 1px solid;
	position: fixed;
	bottom: 0;
	width: 100%;
}
</style>
